/**
 * @author littlebrown
 */

var Lightbox = Class.create({
	
	$Setup: function(options)
	{
		this.options = {
			autoFire		: false,
			width			: 500,
			height			: 300,
			blockBase		: true,
			valign			: 'center',
			halign			: 'center',
			type			: 'Ajax',
			skin			: 'Normal',
			barPosition		: 'top',
			loadingMessage	: '<br /><br />Loading...',
			id				: false,
			style			: {},
			title			: 'Info',
			baseTop			: document.viewport.getScrollOffsets()['top'],
			contentAlign	: 'left'
		};
		this.readOptions(options);
		this.restoreOptions = this.options;
		if(Lightbox.prototype.index == null)
			Lightbox.prototype.index = 0;
		this.zindex = (Lightbox.prototype.index + 1) * 100;
		return this.options;
	},	

	readOptions: function(options)
	{
		Object.extend(this.options, options);
	},
	
	createBase: function() 
	{
		if(this.options.blockBase == true) {
			$this = this;
			if(!this.base) {
				var viewport = FF.Utils.getWindowSize();
				var base = Builder.node('div', {id: 'LightboxBase' + $this.zindex, className: 'LightboxBase_style'});
				Element.setStyle(base, {
					'top'		: 	$this.options.baseTop + 'px',
					'width'		: 	viewport['width'] + 'px',
					'height'	: 	viewport['height'] + 'px',
					'display'	: 	'block',
					'zIndex'	: 	($this.zindex + 2)
				});
				Element.setOpacity(base, 0.7);
				document.body.appendChild(base);
				this.base = base;
				this.base.scrollTo();
			} else {
				this.base.style.top = this.options.topPosition + 'px';
			}
		}
	},
	
	createContainer: function() 
	{
		$this = this;
		if(!this.base)
			this.createBase();
		if(!this.container) {
			var container = Builder.node('div', {
				id: $this.options.id || 'LightboxContainer' + $this.zindex,
				className: 'LightboxContainer_style'
			});
			var style = Object.extend({
				'zIndex'	: ($this.zindex + 5),
				'top'		: ($this.options.topPosition + 4) + 'px',
				'width'		: $this.options.width + 'px',
				'height'	: $this.options.height + 'px',
				'textAlign'	: $this.options.contentAlign
			}, this.options.style);
			
			Element.setStyle(container, style);
			
			container.fire = function() {
				$this.fire();
			}
			container.changeSkin = function(newSkin) {
				$this.changeSkin(newSkin);
			}
			container.autoFire = function(d) {
				$this = this;
				if(d) {
					new PeriodicalExecuter(function(pe){
						$this.fire.bindAsEventListener(this);
						pe.stop();
					}, d);
				}					
			}
			container.resize = function(size) {
				$this.resize(size);
			}
			var controller = Builder.node('div', {className: 'LightboxController_style'}, [
				Builder.node('p', {style: 'color: #fff'}, $this.options.title),
				Builder.node('a', 'CHIUDI')
			]);
			Element.setStyle(controller, {
				'zIndex'	: ($this.zindex + 50)
			});
			controller.childElements()[controller.childElements().length-1].observe('click', this.fire.bindAsEventListener(this));
			
			var content = Builder.node('div', {
				id: 'LightboxContent' + $this.zindex, 
				className: 'LightboxContent_style'
			})
			Element.setStyle(content, {
				'zIndex'	: ($this.zindex + 30),
				'overflow'	: 'auto',
				'width'		: $this.options.width + 'px',
				'background': '#fff',
				'height'	: ($this.options.height - controller.offsetHeight) + 'px'
			});
			if(this.options.barPosition == 'top')
				container.appendChild(controller);
			container.appendChild(content);
			if(this.options.barPosition == 'bottom')
				container.appendChild(controller);
			
			this.container	= container;
			this.content	= content;
			this.controller	= controller;
			this.applyContentStyle();
			document.body.appendChild(container);
			container.content = this.content;
		}
		this.applyContentStyle();
		Element.show(this.container);
		
	},
	
	Update: function(reqUrl) 
	{
		this.Open(reqUrl)
	},
	
	changeSkin: function(newSkin)
	{
		switch(newSkin) {
			case 'Panel':
				this.base.hide();
				this.controller.hide();
				break;
		}
	},
	
	resize: function(size) 
	{
		if(size.w != null)
			this.options.width = size.w;
		if(size.h != null)
			this.options.height = size.h;
		new Effect.Morph(this.container, {
			style: 'width:'+this.options.width+'px; height: '+this.options.height+'px; left: '+$this.getLeftPx(),
			duration: 0.5
		});
		new Effect.Morph(this.content, {
			style: 'width:'+this.options.width+'px; height: '+this.options.height+'px',
			duration: 0.5
		});
		if(this.options.type == 'Open') {
			new Effect.Morph(this.content.firstChild, {
			style: 'width:'+this.options.width+'px; height: '+this.options.height+'px',
			duration: 0.5
		});
		}
	},
	
	applyContentStyle: function() 
	{
		if(this.options.valign == 'center') 
			this.container.style.top = this.getTopPx();
		if(this.options.halign == 'center') 
			this.container.style.left = this.getLeftPx();
	},
	
	getTopPx: function() 
	{
		return (((FF.Utils.getWindowSize()['height'] - this.options.height) / 2) + this.options.topPosition) + 'px';
	},
	
	getLeftPx: function()
	{
		return ((FF.Utils.getWindowSize()['width'] - this.options.width) / 2) + 'px';
	},
	
	prepare: function() 
	{
		this.options.topPosition = document.viewport.getScrollOffsets()['top'];
		if(this.options.blockBase == true)
			document.body.style.overflow = 'hidden'; 
	},
	
	fire: function() 
	{
		$this = this;
		switch(this.options.skin) {
			case 'DropDown':
				if(this.base != null)
					Element.remove(this.base);
				new Effect.Move(this.container, {
					y: -($this.options.height + 30), 
					duration: .7
				});
				break;
				
			default:
				if(this.base != null)
					Element.remove(this.base);
				Element.remove(this.container);
				break;
		}
		
		Lightbox.prototype.index--;
		if(Lightbox.prototype.index == 0)
			document.body.style.overflow = 'auto';
	}
	
});

Lightbox.Open = Class.create(Lightbox, {
	
	initialize: function(options)
	{
		$this = this;
		this.$Setup(options);
		this.prepare();
		this.createBase();
		this.createContainer();
		switch (this.options.skin) {
			case 'DropDown':
				this.container.setStyle({
					'top'	: ($this.options.baseTop - Number($this.options.height) + 20) + 'px'
				});
				new Effect.Move(this.container, {
					y: $this.options.baseTop,
					x: $this.container.offsetLeft,
					mode: 'absolute',
					duration: 0.3
				});
				this.insertContent();
				break;
			default:
				this.insertContent();
				break;
		}
		Lightbox.prototype.index++;
	},
	
	insertContent: function()
	{
		var $this = this;
		this.content.innerHTML = this.options.loadingMessage;
		
		switch(this.options.type) {
			
			case 'Ajax':
				new Ajax.Request(this.options.reqUrl, {
					onComplete: function(ajax) {
						$this.content.update(ajax.responseText);
					},
					onError: function(e) {
						$this.content.update("ERROR");
					}
				});
				break;
				
			case 'Open':
				this.content.update();
				this.content.appendChild(Builder.node('iframe', {
					src: $this.options.reqUrl,
					style: 'border: 0; width: ' + $this.options.width + 'px; height: ' + $this.options.height + 'px'
				}));
				break;
			
		}
		if(this.options.autoFire != false) {
			this.intID = setInterval(function() {
				clearInterval($this.intID)
				$this.fire();
			}, ($this.options.autoFire * 1000));
		}
		
	}
	
});
